import { FormBuilder, FormGroup,AbstractControl, Validators,ValidationErrors,ValidatorFn, FormControl } from '@angular/forms';
import { Component, OnInit } from '@angular/core';


/*
 * 这是一段自定义验证的例子
 */
export class CustomValidators {
  
  static range(min:number,max:number):ValidatorFn{
    return (control:AbstractControl):ValidationErrors|null =>{

      const length = control.value ? control.value.length:0;
      if(length === 0){
        return null;
      }
      return min <= length && max >= length ? null:{rangeErr:true};
    }
  }
}


@Component({
  selector: 'app-register',
  templateUrl: './register.component.html',
  styleUrls: ['./register.component.scss']
})
export class RegisterComponent implements OnInit {
  
  public form;  // FormGroup

  constructor(private fb:FormBuilder) {
    this.form = this.fb.group({
      'username':['',Validators.compose([Validators.required,CustomValidators.range(4,10)])]
    });
  }

  ngOnInit() {
    console.log(2);
  }
  openDialog(){
    console.log('Dialog Openning!');
  }

}
